<template>
  <!-- 人物信息 -->
  <div class="menberInfo">
    <div class="avatar"></div>
    <div class="avatar-job">
      <div class="job">首席官</div>
    </div>
    <div class="avatar-info">
      <div class="item">
        <div class="item-key">
          <span>姓</span>
          <span>名:</span>
        </div>
        <div class="item-value">张三</div>
      </div>
      <div class="item">
        <div class="item-key">
          <span>职</span>
          <span>位:</span>
        </div>
        <div class="item-value">副总经理</div>
      </div>
      <div class="item">
        <div class="item-key">
          <span>学</span>
          <span>历:</span>
        </div>
        <div class="item-value">本科</div>
      </div>
      <div class="item">
        <div class="item-key">所属公司:</div>
        <div class="item-value">内蒙煤矿</div>
      </div>
      <div class="item">
        <div class="item-key">入职时间:</div>
        <div class="item-value">2003</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="less" scoped>
.menberInfo{
  width: 100%;
  /* height:300px; */
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  .avatar{
    width:120px;
    height: 120px;
    border-radius:50%;
    background-color:#fff;
    // border: 10px solid #ddd;
    background:url("./images/man.png") no-repeat center center;
    box-shadow: 5px 3px 3px #ddd;
    margin-top: 20px;
  }
  .avatar-job{
    width: 100%;
    padding-top: 10px;
    text-align: center;
    margin-bottom: 20px;
    // border: 1px solid #DCDFE6;
    // border-bottom: 1px dotted #DCDFE6;
    .job{
      width: 80%;
      margin: 0 auto;
      font-size: 24px;
      color: #2a4177;
      border-bottom: 1px dotted #DCDFE6;
      padding-bottom:10px;
    }
  }
  .avatar-info{
    width: 100%;
    .item{
      display: flex;
      font-size: 14px;
      color: #2a4177;
      padding: 0 20px;
      margin-bottom:5px;
      .item-key{
        width: 60px;
        display: flex;
        justify-content:space-between;
        margin-right: 5px;
      }
      .item-value{
        flex: 1;
      }
    }
  }
}
</style>